<extend name="Layout::layout"/>
<block name="content">
    <div class="about_banner" style="background:url(__PUBLIC__/home/img/about_02.jpg) no-repeat center"></div>
    <div class="about_box">
        <div class="about_box">
            <div class="about_box1">
                <div class="left">
                    <div class="left1">
                        <div class="left2">装修体验</div>
                        <div class="left3">Decoration experience</div>
                    </div>
                    <div class="left4 js-top">
                        <ul>
                            <foreach name="columns" item="value">
                                <li><a href="javascript:;"  data-id="{$value['c_id']}">
                                    <p>{$value['column_name']}</p></a></li>
                            </foreach>
                        </ul>
                    </div>
                    <div class="left_product">
                        <div class="left2">产品分类</div>
                        <div class="left3">Company profile</div>
                    </div>
                    <div class="left4 js-down">
                        <ul>
                            <foreach name="columns2" item="value">
                                <li><a href="javascript:;"  data-id="{$value['c_id']}">
                                    <p>{$value['column_name']}</p></a></li>
                            </foreach>
                        </ul>
                    </div>

                </div>
                <div class="right">
                    <div class="right1">
                        <div class="right2">装修体验</div>
                        <div class="right3">Decoration experience</div>
                        <div class="right4"><img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>
                            您的当前位置：装修体验>>装修风格
                        </div>
                    </div>
                    <div class="right_product">
                        <div class="content">
                        <ul>
                            <foreach name="experiences" item="value">
                                <li><a href=""><img src="__PUBLIC__/{$value['plug_ad_pic']}" width="265" height="169"></a>

                                    <div class="right_product1"><a href="#">{$value['title']}</a></div>
                                </li>
                            </foreach>
                        </ul>
                        </div>
                        <div class="paging_1">
                            <div class="paging_2" id="paging_2">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        jQuery(".inBox").slide({
            titCell: ".inHd ul",
            mainCell: ".inBd",
            autoPage: true,
            effect: "leftLoop", // 是否循环，否则为 "left"
            autoPlay: true,     // 是否自动播放，否则为 false
            vis: 4              // 横向显示几列
        });
    </script>

    <script type="text/javascript">
        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, trigger: "click"});
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            //导航栏
           $('.top1 ul>li:nth-child(4)').addClass("present");
            //装修体验
            $('.js-top ul>li:nth-child(1)').addClass("present");
            var column_name="装修风格";
            $.ajax({
                type:'POST',
                url:"{:U('Experience/zxty')}",
                data:{
                    name:column_name
                },
                dataType:"html",
                success:function(dat){
                    var dat = JSON.parse(dat);
                    $('.right2')[0].innerHTML=column_name ;
                    $('.right4')[0].innerHTML='<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>'+"装修体验>>"+ column_name;
                    //$('.right_product')[0].innerHTML="";

                    var nums = 1; //每页出现的数量
                    var pages = Math.ceil(dat.length/nums); //得到总页数

                    var thisDate = function (curr) {
                        var str = '', last = curr * nums - 1;
                        last = last >= dat.length ? (dat.length - 1) : last;
                        var str = '<ul>';
                        for (var a = (curr * nums - nums); a <= last; a++) {
                            str += '<li><a href="Javascript:;" onclick="zxtydetail('+dat[a].n_id+')"><img src="__PUBLIC__/' + dat[a].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="Javascript:;" onclick="detail('+dat[a].n_id+')">' + dat[a].news_title + '</a></div></li>';
                        }
                        str = str + '</ul>';
                        return str;
                    }

                    laypage({
                        cont: 'paging_2',
                        pages: pages,
                        jump: function (obj) {
                            $('.content')[0].innerHTML = thisDate(obj.curr);
                        }
                    })

                }
            })



            $('.js-top ul>li').click(function(){
                $('.left4 ul>li').attr('class',"");
                $(this).addClass("present");
                var  column_name=$(this).context.innerText;
                $.ajax({
                    type:'POST',
                    url:"{:U('Experience/zxty')}",
                    data:{
                        name:column_name
                    },
                    dataType:"html",
                    success:function(dat){
                        var dat = JSON.parse(dat);
                        $('.right2')[0].innerHTML=column_name ;
                        $('.right4')[0].innerHTML='<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>'+"装修体验>>"+ column_name;
                        $('.right1').next('div').replaceWith('<div class="right_product" ><div class="content"></div><div class="paging_1"> <div class="paging_2" id="paging_2"></div></div></div>');
                        $('.content')[0].innerHTML="";

                        var nums = 1; //每页出现的数量
                        var pages = Math.ceil(dat.length/nums); //得到总页数

                        var thisDate = function (curr) {
                            var str = '', last = curr * nums - 1;
                            last = last >= dat.length ? (dat.length - 1) : last;

                            var str = '<ul>';
                            for (var a = (curr * nums - nums); a <= last; a++) {
                                str += '<li><a href="Javascript:;" onclick="zxtydetail('+dat[a].n_id+')"><img src="__PUBLIC__/' + dat[a].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="Javascript:;" onclick="detail('+dat[a].n_id+')">' + dat[a].news_title + '</a></div></li>';
                            }
                            str = str + '</ul>';
                            return str ;
                        }

                        laypage({
                            cont: 'paging_2',
                            pages: pages,
                            jump: function (obj) {
                                $('.content')[0].innerHTML = thisDate(obj.curr);
                            }
                        })

                    }
                })


            })

           $('.js-down ul>li').click(function(){
                $('.left4 ul>li').attr('class',"");
                $(this).addClass("present");
               var column_name = $(this).context.innerText;
               $.ajax({
                   type: 'POST',
                   url: "{:U('About/other2')}",
                   data: {
                       name: column_name
                   },
                   dataType: "html",
                   success: function (data) {
                       //alert(data);
                       var data = JSON.parse(data);
                       $('.right2')[0].innerHTML = column_name;
                       $('.right4')[0].innerHTML = '<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>' + "您的当前位置：产品分类>>" + column_name;
                       $('.right1').next('div').replaceWith('<div class="right_product" ><div class="content"></div><div class="paging_1"> <div class="paging_2" id="paging_2"></div></div></div>');
                       //console.dir(data);
                       var nums = 1;
                       var pages = Math.ceil(data.length / nums);

                       var thisDate = function (curr) {
                           var str1 = '', last = curr * nums - 1;
                           last = last >= data.length ? (data.length - 1) : last;
                           var str1 = '<ul class="news">';
                           for (var b = (curr * nums - nums); b <= last; b++) {
                               str1 += '<li onclick="detail(' + data[b].n_id + ')" style="cursor:pointer"><a><img src="__PUBLIC__/' + data[b].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="detail(' + data[b].n_id + ')">' + data[b].news_title + ' </a></div></li>';
                           }
                           str1 = str1 + '</ul>';
                           return str1;
                       }

                       laypage({
                           cont: 'paging_2',
                           pages: pages,
                           jump: function (obj) {
                               $('.content')[0].innerHTML = thisDate(obj.curr);
                           }
                       })

                   }
               })
            })
        })




        function detail(e){
            var id = e;
            $.ajax({
                type:'POST',
                url:"{:U('about/detail')}",
                data:{
                    id :id,
                },
                dataType:"html",
                success:function(data){
                    var data = JSON.parse(data);
                    var str = '<div><div class="right_product2">' + data.news_typename + '</div><div class="right_product3"><img src="__PUBLIC__/' + data.news_img + '" width="265" height="169"></div><div class="right_product4">产品详情</div> <div class="right_product5">' + data.news_content + '</div></div>';
                    $('.right1').next('div').replaceWith(str);
                }
            })
        }

        function  zxtydetail(e){
            var id= e;

            $.ajax({
                type:'POST',
                url:"{:U('about/detail')}",
                data:{
                    id :id,
                },
                dataType:"html",
                success:function(data){
                    var data = JSON.parse(data);
                    var str = '<div><div class="right_product2">' + data.news_typename + '</div><div class="right_product3">'+  data.news_content  +' </div>';
                    $('.right1').next('div').replaceWith(str);
                }
            })




        }

    </script>



</block>
